 
var vue = new Vue({
    el: '#VueApp',
    delimiters: ['${', '}'],
    data: function () {
        return {
            keyword: "",
            addtype: 1, //1表示添加网站 2表示APP应用
            idsite:0,
            delDisabled: true, //删除禁用
            getCodeDisabled: true, //获取代码
            stopDisabled: true, //停止 禁用
            startDisabled: true, //开始 禁用

            showPlaceSearch: true, //不显示筛选框
            drawerNewPlace: false, //新增广告位的抽屉drawer

            tableLoading: false,
            page: 1,
            total: 0,//总记录数
            pageSize: 10,//分页数据量
            tablelist: [], //表数据
            multipleSelection: [],//被选中的行
            submit : "", // 关闭抽屉时 判断是否弹出确认，提交表单 submit后 不需要确认弹窗
        }
    },
    computed: {
        start:function(){
            
            return (this.page -1) * this.pageSize;
        },
        end(){
            var end = this.start + this.pageSize;
            if( end < this.total){
                return end;
            }
            
            return this.total;
        }
    },
    filters:{
        industry( value ){
            return value.split('//')[1];
        }
    },
    created() {
        // 历史成本，重置成本，可变现净值，现值，公允价值
        this.getAllSites();
    },
    methods: {
        getAllSites(){
            SiteAPI.getAllSites().then(data => {
                // console.log(data)
                this.tablelist = data;
                this.total = data.length;
            })
        },
        // 新增按钮点击事件 1 添加站点2 添加app
        OnNewCreateHandler( addtype ){
            this.drawerNewPlace = true;
            this.idsite = 0;
            this.submit = "";
            this.addtype = addtype;
        },
        OnShowPlaceSearch() {
            this.showPlaceSearch = this.showPlaceSearch ? false : true;
            this.$refs.dropIcon.className = this.showPlaceSearch ? " el-icon-caret-bottom" : "el-icon-caret-top";
        },
        //关键词搜索
        onKeywordChange(value) {
            // console.log(this.keyword)
        },
        //六个下拉change触发
        onSelectChange(e) {
            // console.log(e);
            this.page = 1;
            this.queryParams = e;
            this.queryParams['keyword'] = this.keyword;
            this.getAllSites()
        },
        // 表单组件提交表单 后成功，关闭抽屉
        onCloseDrawer(e ){
            //e == { from: "submit"}
            this.submit = e.from;
            this.$refs.newPlaceDrawer.closeDrawer();
            this.getAllSites();
           /* 
           closeDrawer 方法会先调用  
           下面的 handleDrawerClose 方法进行关闭
            因为设置了 before-close 属性
            所以通过设置一个 submit 变量进行判断 关闭 来自 关闭按钮，还是表单提交后。
            */
        },
        // 点击抽屉右上角 关闭按钮，关闭新建广告位的drawer
        handleDrawerClose(done) {
            // console.log(this.submit)
            if(this.submit == 'submit'){
                done();
                return;
            }
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        handlePageSize(size) {
            this.pageSize = size;
           
        },
        handleCurrentChange(page) {
            this.page = page;
            // console.log(page)
        },
        //全新勾选
        handleSelectionChange(row) {
            this.multipleSelection = row;
        },
        getKeyword() {
            this.page = 1;
            
        },
        handleEdit (index, row, action) {
           
            if(action =='edit'){
                this.drawerNewPlace = true;
                this.addtype = row.type == 'website'? 1:2;
                this.idsite = row.idsite;
            }
            if(action == 'delete'){  
                this.$confirm('此操作将永久删除站点, 是否继续?', '提示').then(()=>{
                    var pos = -1;
                    for (var i in this.tablelist) {

                        if (this.tablelist[i].idsite == row.idsite) {
                            pos = i;                        
                            break;
                        }
                    }
                    if(pos != -1){
                        // 匹配到数组里面存在 row 对应事件 执行删除 api接口调用
                        SiteAPI.deleteSite(row.idsite).then(() => {
                            this.tablelist.splice(pos, 1);
                            this.total = this.tablelist.length;
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                        })
                        
                    }
                   
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });             
                
            }
        }
        
    }
})

